<!--
 * @docName: publicAccountInformation.vue
 * @Author: mwl
 * @Date: 2023/7/18
 * @LastEditors: zhongxiong
 * @LastEditTime: 10:21
-->
<template>
    <div>
      <a-modal v-model="visible" title=" " :closable='false' :destroyOnClose='true' :maskClosable='false' :width="750" :footer="false">
        <p v-show='states==1' class='p'>欢迎您登录勤税宝平台，为保证您能够顺利开展业务，请核对您的账户信息是否有误，谢谢！</p>
        <p v-show='states==2' class='p'>账户信息有误将导致您<span style='color: #cc0000;'>无法正常开展业务</span>，请您再次确认开户信息，以免造成您的损失！</p>
        <div v-if='businessAccountVoListList'>
          <a-form-model :model="businessAccountVoListList" :label-col="labelCol" ref="ruleForm" :rules="rules" :wrapper-col="wrapperCol">
            <a-form-model-item label="开户行" prop="bankName">
              <span>{{businessAccountVoListList.bankName}}</span>
            </a-form-model-item>
            <a-form-model-item label="开户支行" prop="subBankName">
              <span>{{businessAccountVoListList.subBankName}}</span>
            </a-form-model-item>
            <a-form-model-item label="账号名称" prop="channelName">
              <span>{{businessAccountVoListList.entName}}</span>
            </a-form-model-item>
            <a-form-model-item label="所在地" prop="provinceName">
              <span>{{businessAccountVoListList.provinceName}}-{{businessAccountVoListList.cityName}}</span>
            </a-form-model-item>
            <a-form-model-item label="银行账户" prop="bankAccountNo">
              <span>{{businessAccountVoListList.bankAccountNo}}</span>
            </a-form-model-item>
          </a-form-model>
        </div>
        <div class='btn'>
          <a-button v-show='states == 1' @click='handleOk' type="primary">信息无误</a-button>
          <a-button v-show='states == 2' @click='getConfirmedChannelAccountFun' type="primary">确认</a-button>
          <a-button @click='reCertification' >信息有误重新认证</a-button>
        </div>
      </a-modal>
</div>
</template>

<script>
import { getConfirmedChannelAccount } from '@api/register'

export default {
  name: 'publicAccountInformation',
  props:['visible','channelData'],
  data() {
    return {
      visibleState:this.visible,
      rules: {
        bankName: [
          { required: true},
        ],
        subBankName: [
          { required: true},
        ],
        channelName: [
          { required: true},
        ],
        provinceName: [
          { required: true},
        ],
        bankAccountNo: [
          { required: true},
        ],
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      states:1,
      businessAccountVoListList:{},
    }
  },
  watch: {
    channelData: {
      handler(val) {
        if (val.businessAccountVoList && val.businessAccountVoList.length>0) {
          let data= val.businessAccountVoList[0];
          this.businessAccountVoListList = data;
        }
      },
    },
  },
  mounted() {
  },
  methods:{
    handleOk(){
      this.states = 2;
    },
    reCertification(){
      this.visibleState = false;
      this.$emit('resetAuthentication','2');
    },
    //确认渠道账户信息
    getConfirmedChannelAccountFun(){
      let params ={};
      params.channelId = this.channelData.channelInfoVo.id;
      console.log(params.channelId)
      getConfirmedChannelAccount(params).then(res => {
        if (res.success) {
          this.$emit('resetAuthentication','1');
        }else{
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
p.p{
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}
.btn{
  text-align: center;
  padding-top: 10px;
  button{
    margin: 0 10px;
  }
}
</style>
